<template>
  <el-main>
    <!-- 导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/homepage' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/homepage/business'}">业务管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="1.5">
          <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    {{keykey}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="id">ID</el-dropdown-item>
              <el-dropdown-item command="cid">客户ID</el-dropdown-item>
              <el-dropdown-item command="vid">车辆ID</el-dropdown-item>
              <el-dropdown-item command="did">司机ID</el-dropdown-item>
              <el-dropdown-item command="mode">租赁模式</el-dropdown-item>
              <el-dropdown-item command="startDate">起始时间</el-dropdown-item>
              <el-dropdown-item command="finishDate">结束时间</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <!-- 选择区域 -->
        <el-col :span="7">
          <el-input placeholder="请输入内容" v-model="value"
                    class="input-with-select" clearable="" @clear="findlist(key,value)">
            <el-button slot="append" icon="el-icon-search" @click="findlist(key,value)"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addBusinessVisible=true">添加业务</el-button>
        </el-col>
      </el-row>

      <el-table :data="searchlist" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="客户ID" prop="cid"></el-table-column>
        <el-table-column label="车辆ID" prop="vid"></el-table-column>
        <el-table-column label="司机ID" prop="did"></el-table-column>
        <el-table-column label="租赁模式" prop="mode"></el-table-column>
        <el-table-column label="起始时间" prop="startDate"></el-table-column>
        <el-table-column label="结束时间" prop="finishDate"></el-table-column>
        <el-table-column label="操作" fixed="right" width="250px">
          <!-- slot-scope用来获取当前表格的数据对象
               用scope.row可以获取当前列的数据 -->
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="修改" placement="top">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="changeFormBind(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteForm(scope.row.id)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="结算" placement="top">
              <el-button type="success" size="mini" icon="el-icon-coin" @click="settle(scope.row.id)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="催车还交" placement="top">
              <el-button type="warning" size="mini" icon="el-icon-time" @click="urge(scope.row.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码显示 -->
      <div class="block">
        <el-pagination
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>

    </el-card>
    <!-- 添加信息区域 -->
    <el-dialog
      title="添加业务信息"
      :visible.sync="addBusinessVisible"
      width="30%" @close="addBusinessClosed">
      <!-- 主体区域 -->
      <el-form :model="addBusiness" :rules="addBusinessRules" ref="addBusinessRef" label-width="100px"
               class="demo-ruleForm">
        <el-row :gutter="50">
          <el-col :span="10">
            <el-form-item label="客户ID" prop="cid">
              <el-select v-model="changeBusiness.cid" placeholder="请选择">
                <el-option
                  v-for="item in customerlist"
                  :key="item.id"
                  :label="item.id"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="10">
            <el-form-item label="车辆ID" prop="vid">
              <el-select v-model="changeBusiness.vid" placeholder="请选择">
                <el-option
                  v-for="item in vehiclelist"
                  :key="item.id"
                  :label="item.id"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="10">
            <el-form-item label="司机ID" prop="did">
              <el-select v-model="changeBusiness.did" placeholder="请选择">
                <el-option
                  v-for="item in driverlist"
                  :key="item.id"
                  :label="item.id"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="12">
            <el-form-item label="租赁模式" prop="mode">
              <el-radio-group v-model="addBusiness.mode">
                <el-radio label="日租">日租</el-radio>
                <el-radio label="月租">月租</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="385">
          <el-col :span="4">
            <el-form-item label="起始日期" prop="startDate">
              <el-date-picker
                v-model="addBusiness.startDate"
                type="date"
                placeholder="选择起始日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="385">
          <el-col :span="4">
            <el-form-item label="结束日期" prop="finishDate">
              <el-date-picker
                v-model="addBusiness.finishDate"
                type="date"
                placeholder="选择结束日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
    <el-button @click="addBusinessVisible = false">取 消</el-button>
    <el-button type="primary" @click="addForm">确 定</el-button>
  </span>
    </el-dialog>

    <!-- 修改信息区域 -->
    <el-dialog
      title="修改客户信息"
      :visible.sync="changeBusinessVisible"
      width="30%">
      <!-- 主体区域 -->
      <el-form :model="changeBusiness" :rules="addBusinessRules" ref="changeBusinessRef" label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="ID" prop="id">
          <el-input v-model="changeBusiness.id" :disabled="true"></el-input>
        </el-form-item>
        <el-row :gutter="50">
          <el-col :span="10">
            <el-form-item label="客户ID" prop="cid">
              <el-select v-model="changeBusiness.cid" placeholder="请选择">
                <el-option
                  v-for="item in customerlist"
                  :key="item.id"
                  :label="item.id"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="10">
            <el-form-item label="车辆ID" prop="vid">
              <el-select v-model="changeBusiness.vid" placeholder="请选择">
                <el-option
                  v-for="item in vehiclelist"
                  :key="item.id"
                  :label="item.id"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="10">
            <el-form-item label="司机ID" prop="did">
              <el-select v-model="changeBusiness.did" placeholder="请选择">
                <el-option
                  v-for="item in driverlist"
                  :key="item.id"
                  :label="item.id"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="12">
            <el-form-item label="租赁模式" prop="mode">
              <el-radio-group v-model="changeBusiness.mode">
                <el-radio label="日租">日租</el-radio>
                <el-radio label="月租">月租</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="385">
          <el-col :span="4">
            <el-form-item label="起始日期" prop="startDate">
              <el-date-picker
                v-model="changeBusiness.startDate"
                type="date"
                placeholder="选择起始日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="385">
          <el-col :span="4">
            <el-form-item label="结束日期" prop="finishDate">
              <el-date-picker
                v-model="changeBusiness.finishDate"
                type="date"
                placeholder="选择结束日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
    <el-button @click="changeBusinessVisible = false">取 消</el-button>
    <el-button type="primary" @click="changeForm">确 定</el-button>
  </span>
    </el-dialog>
  </el-main>
</template>

<script>
export default {
  name: "business",
  data() {
    //数字合法验证
    var checkNumber = (rule, value, callback) => {
      const regNumber = /^(0|[1-9]\d*)$/
      //验证成功
      if (regNumber.test(value)) {
        return callback();
      } else {
        callback(new Error('请输入合法的数字'));
      }
    }
    return {
      businesslist: [],
      searchlist: [],
      customerlist:[],
      vehiclelist:[],
      driverlist:[],
      keykey: '选择',
      key: '',//搜索类别
      value: '',//搜索值
      total: 0,
      alltotal: 0,
      addBusinessVisible: false,  //添加搜索框的隐藏和显示
      changeBusinessVisible: false,
      addBusiness: {      //添加部门数据
        cid: null,
        vid: null,
        did: null,
        mode: '',
        startDate: '',
        finishDate: ''
      },
      changeBusiness: {
        id: 0,
        cid: null,
        vid: null,
        did: null,
        mode: '',
        startDate: '',
        finishDate: ''
      },
      addBusinessRules: {  //添加表单验证规则
        cid: [
          {required: true, message: '请输入客户ID', trigger: 'blur'},
          {validator: checkNumber, trigger: 'blur'}
        ],
        did: [
          {required: true, message: '请输入客户ID', trigger: 'blur'},
          {validator: checkNumber, trigger: 'blur'}
        ],
        vid: [
          {required: true, message: '请输入客户ID', trigger: 'blur'},
          {validator: checkNumber, trigger: 'blur'}
        ],
        mode: [
          {required: true, message: '请输入租赁模式', trigger: 'blur'},
        ],
        startDate: [
          {required: true, message: '请输入起始时间', trigger: 'blur'}
        ],
        finishDte: [
          {required: true, message: '请输入结束时间', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.getList();
    this.getCustomer();
    this.getDriver();
    this.getVehicle();
    this.$message.success("获取成功");
  },
  methods: {
    getList: function () {
      this.$axios.get('/api/business/list').then(res => {
        /*console.log(res.data);*/
        this.businesslist = res.data;
        this.searchlist = res.data;
        this.alltotal = res.data.length;
        this.total = res.data.length;

      }).catch(err => {
        console.log(err);
      })
    },
    getCustomer:function () {
      this.$axios.get('/api/customer/list'
      ).then(res=>{
        console.log(res);
        this.customerlist=res.data;
      }).catch(err=>{
        console.log(err);
      })
    },
    getVehicle:function () {
      this.$axios.get('/api/vehicle/list'
      ).then(res=>{
        console.log(res);
        this.vehiclelist=res.data;
      }).catch(err=>{
        console.log(err);
      })
    },
    getDriver:function () {
      this.$axios.get('/api/driver/list'
      ).then(res=>{
        console.log(res);
        this.driverlist=res.data;
      }).catch(err=>{
        console.log(err);
      })
    },
    findlist: function (key, value) {
      if (value == '') {
        this.searchlist = this.businesslist;
        this.total = this.alltotal;
        this.keykey = '选择';
      } else {
        this.$axios.get('/api/business/search', {
          params: {
            key: key,
            value: value
          }
        }).then(res => {
          this.searchlist = res.data;
          this.total = res.data.length;

          console.log(res.data);
        }).catch(err => {
          console.log(err);
        })
      }
    },
    addForm: function () {
      this.$refs.addBusinessRef.validate(valid => {
        console.log(valid);
        if (!valid) return;
        let addBusiness = this.addBusiness;
        this.$axios.post('/api/business/save', addBusiness
        ).then(res => {
          console.log(res);
          this.$message.success('添加业务成功');
          this.addBusinessVisible = false;
          this.getList();
        }).catch(err => {
          console.log(err);
        })
      })
    },
    //删除列表
    deleteForm: function (res) {
      console.log(res);
      this.$confirm('此操作将永久删除该业务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get('/api/business/delete', {
          params: {
            id: res
          }
        }).then(res => {
          this.$message.success('删除业务成功');
          this.getList();
          console.log(res);
        }).catch(err => {
          console.log(err);
        })
      })
    },
    changeForm: function () {
      this.$refs.changeBusinessRef.validate(valid => {
        console.log(valid);
        if (!valid) return;
        let changeBusiness = this.changeBusiness;
        this.$axios.post('/api/business/update', changeBusiness
        ).then(res => {
          console.log("res");
          console.log(res);
          this.$message.success('修改业务信息成功');
          this.changeBusinessVisible = false;
          this.getList();
        }).catch(err => {
          console.log(err);
        })
      }).catch(err => {
        console.log(err);
      })
    },
    changeFormBind: function (res) {
      this.changeBusiness = res;
      console.log(this.changeBusiness);
      this.changeBusinessVisible = true;
      this.getList();
    },
    settle: function (res) {
      this.$axios.get('/api/business/getrent', {
        params: {
          id: res
        }
      }).then(res => {
        console.log(res);
        alert("租金合计为"+res.data+"元");
      }).catch(err => {
        console.log(err);
      })
      },
    urge:function (res) {
      this.$axios.get('/api/business/urge', {
        params: {
          id: res
        }
      }).then(res => {
        console.log(res);
        alert(res.data);
      }).catch(err => {
        console.log(err);
      })
    },
    handleCommand: function (command) {
      this.key = command;
      switch (command) {
        case 'id':
          this.keykey = 'ID';
          break;
        case 'cid':
          this.keykey = '客户ID';
          break;
        case 'vid':
          this.keykey = '车辆ID';
          break;
        case 'did':
          this.keykey = '司机ID';
          break;
        case 'mode':
          this.keykey = '租赁模式';
          break;
        case 'startDate':
          this.keykey = '起始时间';
          break;
        case 'finishData':
          this.keykey = '结束时间';
          break;
      }
    },
    //关闭对话框重置信息
    addBusinessClosed: function () {
      this.$refs.addBusinessRef.resetFields();
    }
  }
}
</script>

<style scoped>
.el-aside {
  color: #333;
  height: 600px;
}

.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}

.el-table {
  margin-top: 15px; //表格与搜索框边距
  font-size: 15px;
}

.el-pagination {
  margin-top: 15px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;


}

.el-icon-arrow-down {
  font-size: 12px;
  margin-top: 12px;
}

.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
